<script setup lang="ts">
// import XtxSwiper from '@/components/XtxSwiper.vue'
import CustomNavbar from '@/pages/index/componets/CustomNavbar.vue'
import CategoryPanel from './componets/CategoryPanel.vue'
import HotPanel from './componets/HotPanel.vue'
import SkeletonP from './componets/SkeletonP.vue'
import { getHomeBannerAPI } from '@/services/home'
import type { BannerItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const homeData = ref<BannerItem[]>([])
const isShow = ref(false)
onLoad(async () => {
  await Promise.all([getHomeBannerData()])
  isShow.value = true
})
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  // console.log(res)
  homeData.value = res.result
}
//下滑刷新
const HotPanels = ref()
const category = ref()
const refresher = ref(false)
const swiper = ref()
const refreshOk = async () => {
  refresher.value = true
  homeData.value = [] as BannerItem[]
  swiper.value.activeIndexs()
  // await getHomeBannerData()
  // await HotPanels.value.getHomeHotData()
  // await category.value.getHomeData()
  await Promise.all([
    getHomeBannerData(),
    HotPanels.value.getHomeHotData(),
    category.value.getHomeData(),
  ])

  refresher.value = false
  console.log(refresher.value)
}
//触底刷新
const guess = ref()
const scrollBow = () => {
  guess.value.pullRefresh()
}
</script>

<template>
  <CustomNavbar />

  <scroll-view
    class="sroll-view"
    scroll-y
    refresher-enabled
    @refresherrefresh="refreshOk"
    @scrolltolower="scrollBow"
    :refresher-triggered="refresher"
  >
    <SkeletonP v-if="!isShow" />
    <template v-else>
      <XtxSwiper ref="swiper" :list="homeData"></XtxSwiper>
      <CategoryPanel ref="category"></CategoryPanel>
      <HotPanel ref="HotPanels" />
      <XtxGuess ref="guess"></XtxGuess>
    </template>
  </scroll-view>
</template>

<style lang="scss">
//
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f7f7f7;
}
.sroll-view {
  flex: 1;
}
</style>
